CSS Selector is one of the most powerful and commonly used locator strategies in Selenium WebDriver. It allows automation testers to identify web elements using CSS patterns based on attributes such as ID, class, name, type, value, relationships, and combinations of multiple attributes.
CSS Selectors are especially useful when an element does not have a unique ID or when a tester needs a concise and readable locator. Selenium WebDriver supports CSS selectors through the By.cssSelector() method.
CSS selectors are an important part of Selenium WebDriver element location. JustAcademy's Selenium training curriculum specifically includes locating elements using ID, XPath, and CSS selectors, along with WebDriver commands, forms, buttons, dropdowns, and web elements. You can explore the JustAcademy's Selenium Training Course and use the Register for Course Demo option for further learning information.
A CSS Selector is a pattern used to select HTML elements based on their tag name, ID, class, attributes, relationships, or combinations of these properties.
In Selenium, a CSS Selector is passed to the By.cssSelector() method.
driver.findElement(By.cssSelector("selector"));For example:
driver.findElement(By.cssSelector("#username"));This statement locates an element whose HTML id attribute is username.
CSS Selectors provide a flexible way to locate web elements in automated tests. They are particularly useful when simple locators such as ID, Name, or Class Name are not sufficient.
The basic syntax is:
driver.findElement(By.cssSelector("CSS_SELECTOR"));For example:
driver.findElement(By.cssSelector("#loginButton")).click();import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class CSSSelectorExample {
public static void main(String[] args) {
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("https://example.com");
driver.findElement(
By.cssSelector("#login")
).click();
driver.quit();
}
}
Consider the following HTML:
<input id="username" type="text" name="username">The ID-based CSS Selector is:
#usernameSelenium code:
driver.findElement(
By.cssSelector("#username")
).sendKeys("admin");
The hash symbol # is used to select an element by its ID.
<input id="email" type="email">CSS Selector:
#emailSelenium:
driver.findElement(
By.cssSelector("#email")
).sendKeys("[email protected]");
The dot . symbol is used to select an element by class.
<button class="login-button">Login</button>CSS Selector:
.login-buttonSelenium:
driver.findElement(
By.cssSelector(".login-button")
).click();
A CSS Selector can use an HTML tag directly.
<button>Login</button>CSS Selector:
buttonHowever, if many buttons exist on the page, the selector may not uniquely identify the desired button.
You can combine an HTML tag and class name.
<button class="submit-button">Submit</button>CSS Selector:
button.submit-buttonSelenium:
driver.findElement(
By.cssSelector("button.submit-button")
).click();
<input id="username" type="text">CSS Selector:
input#usernameAlthough #username is normally sufficient when the ID is unique, combining the tag and ID can make the selector more descriptive.
CSS selectors can locate an element using the name attribute.
<input name="username" type="text">CSS Selector:
input[name='username']Selenium:
driver.findElement(
By.cssSelector("input[name='username']")
).sendKeys("admin");
<input type="password">CSS Selector:
input[type='password']Selenium:
driver.findElement(
By.cssSelector("input[type='password']")
).sendKeys("secret123");
<input type="submit" value="Login">CSS Selector:
input[value='Login']<input type="text" placeholder="Enter Username">CSS Selector:
input[placeholder='Enter Username']Selenium:
driver.findElement(
By.cssSelector("input[placeholder='Enter Username']")
).sendKeys("admin");
Multiple attributes can be combined in a single CSS Selector.
<input type="text" name="username" placeholder="Enter Username">CSS Selector:
input[type='text'][name='username']Another example:
input[type='text'][name='username'][placeholder='Enter Username']Multiple attributes make a selector more specific when a single attribute matches several elements.
input[name='username']If multiple elements have the same name, a more specific selector can be used:
input[type='text'][name='username']<input class="form-control" name="email" type="email">CSS Selector:
input.form-control[name='email']Suppose an element contains multiple classes:
<button class="btn btn-primary submit">Submit</button>CSS Selector:
button.btn.btn-primary.submitMultiple class names are joined without spaces when they belong to the same element.
Consider:
.container.buttonThis means an element having both container and button classes.
Whereas:
.container .buttonmeans an element with class button located inside an element with class container.
The > symbol selects a direct child.
<div class="login-form">
<input type="text">
</div>
CSS Selector:
div.login-form > inputA space selects a descendant element at any level.
div.login-form inputThis can locate an input inside the login form even if the input is nested deeper within the DOM.
| Selector | Meaning |
|---|---|
> | Direct child |
| Space | Any descendant |
+ | Adjacent sibling |
~ | General sibling |
<div class="login">
<div class="form-group">
<input name="username">
</div>
</div>
CSS Selector:
div.login input[name='username']<div class="login">
<input name="username">
</div>
CSS Selector:
div.login > input[name='username']The + selector identifies an element immediately following another element.
<label>Username</label>
<input type="text">
CSS Selector:
label + inputThe ~ selector identifies matching sibling elements that appear after the specified element.
label ~ inputA CSS Selector can check whether an attribute exists.
<input type="text" required>Selector:
input[required]The = operator matches an exact attribute value.
input[type='text']This selects input elements whose type attribute exactly equals text.
The ^= operator matches an attribute value that starts with a specified string.
<input id="user_12345">CSS Selector:
input[id^='user_']The $= operator matches an attribute value that ends with a specified string.
<input id="user_12345">CSS Selector:
input[id$='12345']The *= operator matches an attribute value containing a specified substring.
<input id="user_12345">CSS Selector:
input[id*='user']| Operator | Purpose | Example |
|---|---|---|
= | Exact match | input[name='email'] |
*= | Contains | input[id*='user'] |
^= | Starts with | input[id^='user_'] |
$= | Ends with | input[id$='_field'] |
~= | Contains a space-separated word | div[class~='active'] |
|= | Exact value or value followed by hyphen | div[lang|='en'] |
Modern applications frequently generate dynamic IDs.
<input id="user_874923">If the stable portion is user_, use:
input[id^='user_']Another example:
input[id*='874']Suppose:
<button class="btn-submit-9384">Submit</button>If the stable portion is btn-submit:
button[class*='btn-submit']<input name="username_123">Selector:
input[name^='username_']Attribute matching is useful when only part of an attribute value is stable.
input[data-testid*='login']This can match an element whose data-testid contains login.
Modern web applications often use custom data attributes for automation.
<button data-testid="login-button">Login</button>CSS Selector:
button[data-testid='login-button']Selenium:
driver.findElement(
By.cssSelector("button[data-testid='login-button']")
).click();
<button aria-label="Search">🔍</button>CSS Selector:
button[aria-label='Search']<input type="text" name="username">
<input type="password" name="password">
Username:
input[name='username']Password:
input[name='password']<button id="loginBtn">Login</button>Selector:
button#loginBtnOr:
#loginBtn<a href="/login">Login</a>CSS Selector using tag and attribute:
a[href='/login']The href attribute can be used to identify links.
a[href='/courses']For an external URL:
a[href='https://example.com']<input type="checkbox" name="terms">CSS Selector:
input[type='checkbox'][name='terms']Selenium:
driver.findElement(
By.cssSelector("input[type='checkbox'][name='terms']")
).click();
<input type="radio" name="gender" value="male">CSS Selector:
input[type='radio'][value='male']<select id="country">
<option value="india">India</option>
<option value="usa">USA</option>
</select>
CSS Selector:
select#countryselect#country option[value='india']This selector identifies the India option inside the country dropdown.
<img src="/images/logo.png" alt="Company Logo">CSS Selector:
img[alt='Company Logo']<table id="users">
<tr>
<td>John</td>
<td>[email protected]</td>
</tr>
</table>
Table selector:
table#userstable#users trThis selects rows inside the users table.
table#users tr tdThis selects cells inside rows of the users table.
CSS provides positional selectors that can be used for simple table structures.
table#users tr:nth-child(2) td:nth-child(1)However, for complex data-driven table relationships, XPath or programmatic row processing may be easier to maintain.
:nth-child() can select an element based on its position among siblings.
ul li:nth-child(2)This selects the second list item.
:nth-of-type() selects an element based on its position among elements of the same tag type.
div:nth-of-type(2)ul li:first-childThis selects the first li element that is the first child of its parent.
ul li:last-childThis selects the last child matching the structure.
div:first-of-typediv:last-of-typeThe :not() pseudo-class excludes matching elements.
input:not([type='hidden'])This can select input elements whose type is not hidden.
The :checked pseudo-class can identify checked radio buttons and checkboxes.
input[type='checkbox']:checkedRadio button example:
input[type='radio']:checkedThe :enabled pseudo-class can identify enabled form controls.
input:enabledThe :disabled pseudo-class can identify disabled controls.
input:disabledinput:requiredThis can identify required input elements.
input:optionalMultiple conditions can be combined without spaces when they refer to the same element.
input.form-control[type='text'][name='username']button.btn.primary[data-action='login']This identifies a button that has the classes btn and primary and a matching data-action attribute.
The comma allows multiple selectors to be grouped.
input[type='text'], input[type='email']This matches both text and email input elements.
<form id="loginForm">
<input name="username" type="text">
<input name="password" type="password">
<button type="submit">Login</button>
</form>
Username:
form#loginForm input[name='username']Password:
form#loginForm input[name='password']Button:
form#loginForm button[type='submit']driver.findElement(
By.cssSelector("input[name='username']")
).sendKeys("admin");
driver.findElement(
By.cssSelector("input[name='password']")
).sendKeys("admin123");
driver.findElement(
By.cssSelector("button[type='submit']")
).click();
input[name='firstName']
input[name='lastName']
input[name='email']
input[name='password']
button[type='submit']
These selectors can be used to automate registration form fields.
<input id="search" type="search" placeholder="Search products">Selector:
input#searchOr:
input[placeholder='Search products']<button class="search-btn" type="submit">Search</button>Selector:
button.search-btn<div class="product-card" data-product-id="101">
<h3 class="product-name">Laptop</h3>
<button class="add-cart">Add to Cart</button>
</div>
Product card:
div.product-card[data-product-id='101']Add to Cart button:
div.product-card[data-product-id='101'] button.add-cartdiv.product-card .product-nameThis selects product names within product cards.
<nav class="main-menu">
<a href="/home">Home</a>
<a href="/courses">Courses</a>
<a href="/contact">Contact</a>
</nav>
All navigation links:
nav.main-menu aCourses link:
nav.main-menu a[href='/courses']footer aThis identifies links inside the footer.
<div class="modal" id="loginModal">
<input name="username">
</div>
Username inside modal:
div#loginModal input[name='username']<div class="alert alert-success">Login successful</div>Selector:
div.alert.alert-success<div class="error-message">Invalid password</div>Selector:
div.error-message<section id="billing">
<input name="city">
</section>
Selector:
section#billing input[name='city']The most common usage is:
WebElement element = driver.findElement(
By.cssSelector("#username")
);
Then an action can be performed:
element.sendKeys("admin");findElements() returns a list of matching elements.
List<WebElement> buttons = driver.findElements(
By.cssSelector("button")
);
List<WebElement> links = driver.findElements(
By.cssSelector("nav a")
);
System.out.println(
"Number of links: " + links.size()
);
List<WebElement> links = driver.findElements(
By.cssSelector("nav a")
);
for (WebElement link : links) {
System.out.println(link.getText());
}
WebDriverWait wait =
new WebDriverWait(driver, Duration.ofSeconds(10));
WebElement loginButton = wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector("button[type='submit']")
)
);
loginButton.click();
import java.time.Duration;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
WebElement element = wait.until(
ExpectedConditions.presenceOfElementLocated(
By.cssSelector("#dashboard")
)
);
WebElement element = wait.until(
ExpectedConditions.visibilityOfElementLocated(
By.cssSelector(".dashboard")
)
);
WebElement element = wait.until(
ExpectedConditions.elementToBeClickable(
By.cssSelector("button.login")
)
);
element.click();
driver.manage().timeouts().implicitlyWait(
Duration.ofSeconds(10)
);
After configuring the implicit wait, CSS Selectors can be used normally with findElement().
Dynamic applications often generate changing IDs, classes, and other attributes. CSS attribute operators can help create selectors based on stable portions.
input[id^='user_']
button[class*='submit']
div[data-testid='login-panel']
React applications often generate dynamic class names. When available, stable attributes such as data-testid, aria-label, or stable IDs can provide clearer CSS Selectors.
button[data-testid='login-button']Angular applications may contain framework-generated attributes and dynamic DOM structures. Prefer stable application-specific attributes where possible.
input[formcontrolname='username']button[aria-label='Close']Accessibility attributes can sometimes provide stable and meaningful selectors when they are intentionally maintained by the application.
<input formcontrolname="email" type="email">Selector:
input[formcontrolname='email']<button data-test="submit-button">Submit</button>Selector:
button[data-test='submit-button']CSS Selectors are frequently stored as By objects in Page Object Model classes.
public class LoginPage {
private WebDriver driver;
private By username =
By.cssSelector("input[name='username']");
private By password =
By.cssSelector("input[name='password']");
private By loginButton =
By.cssSelector("button[type='submit']");
public LoginPage(WebDriver driver) {
this.driver = driver;
}
public void login(String user, String pass) {
driver.findElement(username).sendKeys(user);
driver.findElement(password).sendKeys(pass);
driver.findElement(loginButton).click();
}
}
public WebElement findByCss(String selector) {
return driver.findElement(
By.cssSelector(selector)
);
}
Usage:
findByCss("#username").sendKeys("admin");public void clickByCss(String selector) {
driver.findElement(
By.cssSelector(selector)
).click();
}
Usage:
clickByCss("button.login");public void typeByCss(String selector, String text) {
driver.findElement(
By.cssSelector(selector)
).sendKeys(text);
}
Keep CSS Selectors centralized inside page classes instead of writing long selectors repeatedly throughout test methods.
private final By emailField =
By.cssSelector("input[name='email']");
import org.testng.Assert;
import org.testng.annotations.Test;
@Test
public void verifyLoginButton() {
WebElement button = driver.findElement(
By.cssSelector("button[type='submit']")
);
Assert.assertTrue(button.isDisplayed());
}
WebElement message = driver.findElement(
By.cssSelector(".success-message")
);
Assert.assertTrue(
message.isDisplayed()
);
WebElement error = driver.findElement(
By.cssSelector(".error-message")
);
Assert.assertTrue(error.isDisplayed());
WebElement checkbox = driver.findElement(
By.cssSelector("input[type='checkbox']:checked")
);
This can be useful for verifying that at least one matching checkbox is currently checked.
WebElement radio = driver.findElement(
By.cssSelector("input[type='radio']:checked")
);
nav a.activeThis selects a navigation link having the active class.
CSS Selectors identify elements in the DOM but do not automatically make hidden elements interactable.
input[type='hidden']If an element is hidden, Selenium interaction may require waiting for it to become visible or using an appropriate application-level interaction.
If another element overlaps the target element, a click may result in ElementClickInterceptedException.
Possible solutions include:
If the selector does not match an element, Selenium can throw NoSuchElementException.
Check:
If the DOM is refreshed or an element is replaced after it has been located, the previously stored WebElement can become stale.
In such situations, locate the element again.
If the target element is inside an iframe, switch to that iframe before using the CSS Selector.
driver.switchTo().frame("loginFrame");
driver.findElement(
By.cssSelector("input[name='username']")
).sendKeys("admin");
driver.switchTo().defaultContent();
driver.switchTo().frame("outerFrame");
driver.switchTo().frame("innerFrame");
driver.findElement(
By.cssSelector("#username")
).sendKeys("admin");
driver.switchTo().defaultContent();
CSS Selectors can be used within an appropriate Shadow Root context, but Selenium must first access the shadow root. A normal document-level CSS search does not automatically cross a shadow DOM boundary.
| Feature | ID | CSS Selector |
|---|---|---|
| Syntax | By.id() | By.cssSelector() |
| Complexity | Simple | Flexible |
| Attribute matching | Limited to ID | Multiple attributes supported |
| Relationships | Not directly supported | Parent/child/sibling CSS patterns supported |
| Dynamic attributes | Limited | Attribute operators available |
| Feature | Name | CSS Selector |
|---|---|---|
| Method | By.name() | By.cssSelector() |
| Based on | name attribute | CSS pattern |
| Multiple conditions | Limited | Supported |
| Dynamic matching | Limited | Supported with attribute operators |
| Feature | Class Name | CSS Selector |
|---|---|---|
| Method | By.className() | By.cssSelector() |
| Single class | Easy | Easy |
| Multiple classes | Limited | Supported |
| Attributes | No | Yes |
| Relationships | No | Yes |
| Feature | CSS Selector | XPath |
|---|---|---|
| Syntax | CSS-based | XPath-based |
| ID/Class | Excellent | Excellent |
| Attribute matching | Excellent | Excellent |
| Parent/child relationships | Supported | Supported |
| Text matching | Limited compared with XPath | Strong |
| Sibling relationships | Supported | Supported |
| Complex DOM navigation | Can be less expressive | Highly expressive |
| Readability | Often concise | Can become longer |
*=, ^=, or $=.# for an ID selector.. for a class selector.HTML:
<input id="username">Correct:
#usernameIncorrect:
.usernameHTML:
<button class="login-button">Login</button>Correct:
.login-buttonIncorrect:
#login-buttonHTML:
<button class="btn primary">Submit</button>To select the same element having both classes:
button.btn.primaryUsing:
button.btn .primarymeans an element with class primary inside an element with class btn, which is a different structure.
Avoid unnecessarily depending on the complete DOM hierarchy.
html body div.container div.row div.col-md-6 form div.form-group input.form-controlA shorter stable selector may be preferable:
input[name='username']Some frameworks generate classes that may change between builds or sessions.
.css-1a2b3c4If the class is not stable, prefer a stable application attribute such as:
[data-testid='username']Modern browsers allow testers to inspect elements and test CSS selectors through Developer Tools.
A useful workflow is:
Open Web Page
↓
Right Click Element
↓
Select Inspect
↓
Identify HTML Element
↓
Find Stable ID/Class/Attribute
↓
Create CSS Selector
↓
Test Selector in Developer Tools
↓
Use Selector in Selenium
Browser Developer Tools can be used to test a CSS Selector with document.querySelector().
document.querySelector("#username")For multiple matching elements:
document.querySelectorAll("input")This is useful for verifying whether a selector matches the intended element before using it in Selenium.
A CSS Selector is a pattern used by Selenium WebDriver to identify web elements based on CSS-style rules such as ID, class, attributes, relationships, and positional selectors.
By.cssSelector()driver.findElement(By.cssSelector("#username"));driver.findElement(By.cssSelector(".login-button"));driver.findElement(
By.cssSelector("input[name='username']")
);
input[id*='user']^= matches an attribute value that starts with a specified string.
$= matches an attribute value that ends with a specified string.
*= matches an attribute value that contains a specified string.
parent > childparent childinput[type='checkbox']:checkedYes.
driver.findElements(
By.cssSelector("button")
);
Yes, stable portions of dynamic attributes can be matched using CSS attribute operators.
input[id^='user_']The choice depends on the DOM structure and the locator requirement. CSS Selectors are concise and powerful for attributes, classes, IDs, and CSS relationships, while XPath provides additional flexibility for text and more complex DOM navigation.
Consider a login page:
<form id="loginForm">
<input id="username" name="username" type="text">
<input id="password" name="password" type="password">
<button class="login-btn" type="submit">Login</button>
</form>
Automation:
driver.findElement(
By.cssSelector("#username")
).sendKeys("admin");
driver.findElement(
By.cssSelector("#password")
).sendKeys("admin123");
driver.findElement(
By.cssSelector("button.login-btn")
).click();
driver.findElement(
By.cssSelector("input[name='firstName']")
).sendKeys("John");
driver.findElement(
By.cssSelector("input[name='lastName']")
).sendKeys("Smith");
driver.findElement(
By.cssSelector("input[type='email']")
).sendKeys("[email protected]");
driver.findElement(
By.cssSelector("input[type='password']")
).sendKeys("Password123");
driver.findElement(
By.cssSelector("button[type='submit']")
).click();
driver.findElement(
By.cssSelector("input[placeholder='Search products']")
).sendKeys("Laptop");
driver.findElement(
By.cssSelector("button.search-btn")
).click();
driver.findElement(
By.cssSelector("button.add-cart")
).click();
driver.findElement(
By.cssSelector("nav.main-menu a[href='/courses']")
).click();
WebElement terms = driver.findElement(
By.cssSelector("input[type='checkbox'][name='terms']")
);
if (!terms.isSelected()) {
terms.click();
}
WebElement male = driver.findElement(
By.cssSelector("input[type='radio'][value='male']")
);
if (!male.isSelected()) {
male.click();
}
WebElement selected = driver.findElement(
By.cssSelector("input[type='radio']:checked")
);
System.out.println(
"Selected value: " +
selected.getAttribute("value")
);
List<WebElement> rows = driver.findElements(
By.cssSelector("table#users tbody tr")
);
for (WebElement row : rows) {
System.out.println(row.getText());
}
List<WebElement> products = driver.findElements(
By.cssSelector("div.product-card")
);
for (WebElement product : products) {
System.out.println(product.getText());
}
Launch Browser
↓
Open Application
↓
Inspect DOM
↓
Identify Stable Attribute
↓
Create CSS Selector
↓
Validate Selector
↓
Use By.cssSelector()
↓
Locate WebElement
↓
Perform Action
↓
Validate Result
↓
Continue Test
↓
Close Browser
| Requirement | CSS Selector |
|---|---|
| ID | #username |
| Class | .login-button |
| Tag | input |
| Tag + Class | button.login-button |
| Tag + ID | input#username |
| Name | input[name='username'] |
| Type | input[type='password'] |
| Exact Attribute | input[name='email'] |
| Contains Attribute | input[id*='user'] |
| Starts With | input[id^='user_'] |
| Ends With | input[id$='_field'] |
| Direct Child | form > input |
| Descendant | form input |
| Adjacent Sibling | label + input |
| General Sibling | label ~ input |
| First Child | li:first-child |
| Last Child | li:last-child |
| Checked | input:checked |
| Disabled | input:disabled |
| Enabled | input:enabled |
| Not | input:not([type='hidden']) |
data-testid when available.^=, *=, and $= for stable portions of dynamic attributes.CSS Selector is a powerful Selenium locator strategy that allows testers to identify web elements using IDs, classes, tags, attributes, attribute patterns, child relationships, sibling relationships, and pseudo-classes. The basic Selenium syntax is By.cssSelector().
A good CSS Selector should be unique, stable, readable, maintainable, and resistant to unnecessary UI changes. Simple selectors such as IDs and classes are useful when stable, while attribute operators and structural selectors are helpful for dynamic applications.
CSS Selectors are particularly valuable for Selenium automation involving login forms, registration forms, navigation menus, buttons, checkboxes, radio buttons, dropdowns, tables, e-commerce applications, dashboards, and dynamic web applications.
For structured Selenium learning covering WebDriver, locators, CSS selectors, XPath, web elements, forms, TestNG, Page Object Model, dynamic elements, and practical automation projects, explore the JustAcademy's Selenium Training Course.
For additional information and course demonstration options, visit the Register for Course Demo page.
